<!-- 
Copyright (c) Guangzhou Data Control Network Technology Co., Ltd. All rights reserved. 
Licensed under the MIT License.
contact:dcdev_founder@foxmail.com 
-->

<!DOCTYPE html>
<html>

<head>
  <!------ 以下内容不要动 --------------------------------------------------------->
  <meta charset="UTF-8">
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <!-- 数控开发基础样式库（已作一定的自适应，button/label/input/textarea等设置了默认样式） -->
  <link class="_dcdev_preset_" type="text/css" rel="stylesheet"
    href="https://res.dcdev.net/dcdev/v1.0.6/assets/css/dcdevui.css">
  <!-- 页面标题 -->
  <title>数控开发</title> <!-- 桌面端浏览器及收藏夹图标 -->
  <link class="_dcdev_preset_" rel="icon" href="https://www.dcdev.net/icon.png" type="image/x-icon">
  <link class="_dcdev_preset_" rel="shortcut icon" href="https://www.dcdev.net/icon.png" type="image/x-icon">
  <!------ 以上内容不要动 --------------------------------------------------------->
  <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css" media="all">
  <style type="text/css">
    .layui-form-radio>div {
      font-size: 12px;
    }
  </style>
</head>

<body>
  <div class="dcdev-body-container" id="dcdev_body_container">
    <form class="layui-form" style="padding:10px;">
      <div id="component_radio" style="display: flex;justify-content: space-between;flex-wrap: wrap;margin: 0 auto;">
      </div>
    </form>
    <div id="layout_list" style="width: 100%;"> </div>
  </div>
</body>

<!------ 以下内容不要变动 --------------------------------------------------------->
<script class="_dcdev_preset_" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!-- 不授权模式， 仅初始化常用变量及函数 -->
<script class="_dcdev_preset_" src="https://res.dcdev.net/dcdev/v1.0.6/assets/js/init.js" id="initClass"
  authorize_mode="none" console_mode=""></script>
<script class="_dcdev_preset_" src="https://res.dcdev.net/dcdev/v1.0.6/assets/js/ui.js" id="ui_class"
  xhr_show_loading=1></script>

<!------ 以上内容不要变动 --------------------------------------------------------->
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.13.0/js/md5.min.js"></script>

<script>
  $.getScript("./component_index.js", function () {
    var html = "";
    var uihtml = "";
    var componenthtml = "";
    //var ui_name=[];
    var component_name = [];
    /*component_index.forEach(element => {
      //获取所有框架的名称列表
      if (ui_name.indexOf(element.vendor)==-1) {
        ui_name.push(element.vendor);
      }
    });
    //遍历框架名称的数组，动态生成input标签
    ui_name.forEach(input=>{
      uihtml+=`<input type="radio" name="ui" title="${input}" value="${input}" lay-filter="filter">`;
    });
    $('#ui_radio').html(uihtml);*/
    component_index.forEach(element => {
      //动态生成组件单选框
      if (component_name.indexOf(element.desc) == -1) {
        component_name.push(element.desc);
        /*componenthtml+=`<input type="checkbox" value="${element.desc}" name="${element.desc}" title="${element.desc}">`*/
        componenthtml +=
          `<input type="radio" value="${element.desc}"  name="ui" title="${element.desc}" lay-filter="filter">`;
      }
    });
    //添加最后一个‘所有’选项
    componenthtml +=
      `<input type="radio" value="所有"  name="ui" title="所有" lay-filter="filter">`;

    $('#component_radio').html(componenthtml);

    //加载模块
    layui.use('form', function () {
      var form = layui.form;
      //监听单选框
      form.on('radio(filter)', function (data) {
        // debugger;
        var iframe;
        //每次从新选择进行初始化
        html = '';
        component_index.forEach(element => {
          if (element.desc == data.value || data.value == '所有') {
            iframe =
              `<div style="text-align:center"><iframe id=${md5(element.path)} class="dcdev-desktop" src="${element.path}" style="width:100%;height:600px;"></iframe></div>`;
            // 处理每个布局文件的html代码

            appen_html(element, iframe);
          }
        });
        // debugger;
        $(`#layout_list`).html(html);
        //   console.log(md5(element.path))
        //   setIframeHeight(document.getElementById(md5(element.path)));

        form.render();
      });
      /*//监听提交
      form.on('submit(formDemo)', function(data){
        //获得表单提交的数据json对象
        var datajson=data.field;
        var iframe;
        //每次从新选择进行初始化
        html='';
        component_index.forEach(element => {
          if (element.desc==datajson['ui']) {
            iframe = `<div style="text-align:center"><iframe class="dcdev-desktop" src="${element.path}" style="width:100%;height:600px;"></iframe></div>`;
          // 处理每个布局文件的html代码

          appen_html(element, iframe);
          }
        });
        $(`#layout_list`).html(html);
        return false;

      });  */
    });
    // 处理每个布局文件的html代码
    function appen_html(element, iframe) {
      html += `
    <div style="margin-bottom:30px;">
          <div>
            
            <div style="display: block;margin:10px;overflow:hidden">
            <div style="display: -webkit-inline-box;margin:10px;">
              <a style="margin-left: 10px;width:150px;">${element.vendor}</a>
              <a style="margin-left: 10px;">${element.desc}</a>
            </div>
              <div style="float:right;">
              <button onclick="insert_component('${JSON.stringify(element)}')" style="display:inline-block;margin-left:auto">使用</button>
              </div>
            </div>
          </div>
    ${iframe}
    </div>  
    <hr>
        `
    }
  })

  function setIframeHeight(iframe) {
    if (iframe) {
      var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
      if (iframeWin.document.body) {
        console.log(11);
        iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
        console.log(22, iframe.height);
      }
    }
  };

  function show_setting(path) {
    $(`#component_index_setting`).css("display", "block");
  }

  function insert_component(_config) {
    debugger;
    var config = JSON.parse(_config)
    $.get(config.path, function (html) {
      debugger;
      // 调用父窗口函数
      window.parent["insert_to_code_editor"](config, html, true);
    })
  }
</script>

<script>
  $("#cc").change(function () {});
  var component_index_setting_content;
  $("#component_index_setting_content").load("https://res.dcdev.net/dcdev/v1.0.6/assets/html/render_inputor.html", "",
    function () {
      data = {
        // 容器div的id
        id: "component_index_setting_content",
        // x表示横向滚动、y表示竖向滚动
        direction: "y",
        // 每个ul的配置
        ul_config: {
          ul_class: "",
          ul_style: "margin-left: 10px;clear:both;",
        },
        //是否需要按钮
        btn: '修改',
        // 每个li的配置
        li_config: {
          // td 的函数配置
          li_function: [],
          /*
              字段变量使用 # 而不是 $ 来定义
              如需唯一标识某个node，则添加data-key以作区分
              如需多选，需添加一个固定标签：<div data-key="check_tag"></div>,选中及未选中样式，在check_config中配置
          */
          li_html: `   
<div>
    <img data-key=image src="#{type}" style="width:40px;height:40px;">
    <div data-key=title style="font-size:12px;color:gray;">#{min}</div>
</div>
    `,
          li_style: "margin-top:10px;margin-bottom:10px ;"
        },
        // 各种类型的回调
        cb_config: {
          // 点击的回调
          click: function (res) {
            console.log(res);
          },
          click_btn: function (res) {
            console.log(res);
          },
          // 获取数据之后的回调,如需提前干预可在此修改html之后返回
          data_fetched: function (res) {
            // console.log(res);
          },
          // 拼接好html代码且渲染前的回调(data为该行的数据，html为准备渲染的html),如需提前干预可在此修改html之后返回
          before_render: function (res) {
            // console.log(res);
          },
          // 所有数据加载完毕的回调
          no_more: function (res) {
            // console.log(res);
          },
        },
        // 请求及分页的配置
        data_config: {
          data: [{
              type: "option",
              title: "margin",
              column_name: "margin",
              is_require: false,
              default_value: '0px',
              options: ['0px', '5px', '10px', '20px', '30px'],
              options_title: ['0px', '5px', '10px', '20px', '30px'],
            },
            {
              type: "number",
              title: "margin-left",
              column_name: "margin-left",
              is_require: false,
              default_value: 0,
              num_type: "整型",
              unit: "px",
              max_value: 300,
              min_value: -300,
            },
            {
              type: "number",
              title: "margin-right",
              column_name: "margin-right",
              is_require: false,
              default_value: 0,
              num_type: "整型",
              unit: "px",
              max_value: 300,
              min_value: -300,
            },
            {
              type: "number",
              title: "margin-top",
              column_name: "margin-top",
              is_require: false,
              default_value: 0,
              num_type: "整型",
              unit: "px",
              max_value: 300,
              min_value: -300,
            },
            {
              type: "number",
              title: "margin-bottom",
              column_name: "margin-bottom",
              is_require: false,
              default_value: 0,
              num_type: "整型",
              unit: "px",
              max_value: 300,
              min_value: -300,
            },
            {
              type: "html",
              html: `<hr>`
            },
            {
              type: "option",
              title: "padding",
              column_name: "padding",
              is_require: false,
              default_value: '0px',
              options: ['0px', '5px', '10px', '20px', '30px'],
              options_title: ['0px', '5px', '10px', '20px', '30px'],
            },
          ],
        },
      };
      component_index_setting_content = new render_inputor();
      component_index_setting_content.render(data, null, null);
    })
</script>

</html>